{extend name="public/container"}
{block name="content"}
<div id="myApp" v-cloak>
    <div class="douxue-filter padding-10 mb-20" style="margin-bottom:20px">
        <el-form :inline="true" :model="where" size="mini" class="flex">
            <div class="flex flex-between">
                <el-form-item v-if="!disable_organ" size="mini">
                    <el-select
                    :clearable=true
                    placeholder="所属{:lang('Organ')}"
                    @change="doSwitchOrgan"
                    :disabled="organs.length==0"
                    v-model="where.org_id">
                        <el-option v-for="item in organs" :label="item.organ_name" :key="item.id" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item v-if="!disable_school">
                    <el-select
                    :clearable=true
                    placeholder="所属{:lang('School')}"
                    v-model="where.school_id"
                    :disabled="schools.length==0"
                    filterable>
                        <el-option v-for="item in schools" :label="item.school_name" :key="item.id" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-date-picker
                        v-model="where.date_time"
                        type="daterange"
                        align="right"
                        value-format="yyyy-MM-dd"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="where.keyword" placeholder="手机号/姓名">
                        <el-button slot="append" size="small" type="success" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div class="padding-10">
        <el-table
            :data="rows"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            size="mini">
            <el-table-column
                type="expand"
                label="明细"
                width="80"
                align="left">
                <template slot-scope="scope">
                    <el-table
                        :data="scope.row.items"
                        size="mini"
                        show-summary
                        style="100%">
                        <el-table-column
                            prop="pck_name"
                            label="套餐名称"
                            align="left">
                            <template slot-scope="scope">
                                <template v-if="scope.row.pck_id > 0">{{ scope.row.pck_name }}</template>
                                <template v-else>-</template>
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="free_type"
                            label="消费类型"
                            align="left">
                            <template slot-scope="scope">
                                <el-link :underline="false" v-if="scope.row.bought_id > 0">已购消费</el-link>
                                <el-link :underline="false" type="primary" v-else>正常消费</el-link>
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="rel_name"
                            label="条目名称"
                            align="left">
                        </el-table-column>

                        <el-table-column
                            prop="qty"
                            label="数量"
                            align="left">
                        </el-table-column>

                        <el-table-column
                            prop="amt"
                            label="金额"
                            align="left">
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>

            <el-table-column
                v-if="!disable_organ"
                prop="organ_name"
                label="所属{:lang('Organ')}"
                align="left">
            </el-table-column>

            <el-table-column
                v-if="!disable_school"
                prop="school_name"
                label="所属{:lang('School')}"
                align="left">
            </el-table-column>

            <el-table-column
                prop="full_name"
                label="姓名"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.uid > 0">{{ scope.row.full_name }}</template>
                    <template v-else>散客</template>
                </template>
            </el-table-column>

            <el-table-column
                prop="mobile"
                label="手机号"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.uid > 0">{{ scope.row.mobile }}</template>
                    <template v-else>散客</template>
                </template>
            </el-table-column>

            <el-table-column
                prop="order_amt"
                label="消费金额"
                align="left">
            </el-table-column>

            <el-table-column
                prop="pay_type_display"
                label="支付方式"
                align="left">
            </el-table-column>

            <el-table-column
                prop="platform_display"
                label="单据来源"
                align="left">
            </el-table-column>

            <el-table-column
                prop="order_creater"
                label="制单人"
                align="left">
            </el-table-column>

            <el-table-column
                prop="remark"
                label="备注"
                width="130"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.remark">
                        <el-tooltip class="item" effect="light" :content="scope.row.remark" placement="bottom-start">
                            <i class="el-icon-tickets"></i>
                        </el-tooltip>
                    </template>
                    <template v-else>-</template>
                </template>
            </el-table-column>

            <el-table-column
                prop="staus_display"
                label="订单状态"
                align="left">
                <template slot-scope="scope">
                    <el-link :underline="false" type="success" v-if="scope.row.status == 1"> {{ scope.row.status_display }}</el-link>
                    <el-link :underline="false" type="warning" v-else> {{ scope.row.status_display }}</el-link>
                </template>
            </el-table-column>

            <el-table-column
                prop="create_time"
                label="订单时间"
                width="160"
                align="left">
            </el-table-column>

            <el-table-column
                label="操作"
                width="130"
                fixed="right"
                align="left">
                <template slot-scope="scope">
                    <el-link size="mini" :underline="false" type="danger" @click="doAbolish(scope.row.id)" v-if="scope.row.status==1">作废</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                small
                :hide-on-single-page="true"
                layout="prev, pager, next"
                :total="rowsCount"
                :page-size="where.limit"
                @current-change="doLoadRows">
            </el-pagination>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                rowsCount: 0,
                rows: [],
                where: {
                    org_id:default_org_id > 0 ? default_org_id : '',
                    school_id:default_school_id > 0 ? default_school_id : '',
                    keyword: '',
                    status:'',
                    order_type:1,
                    date_time:'',
                    page:1,
                    limit:pageSize,

                },
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                loading:false,
                organs: [],
                schools: [],
                disable_organ: default_org_id > 0 ? true : false,
                disable_school: default_school_id > 0 ? true : false,
            }
        },
        methods: {
            doLoadOrgans () {
                axios.get(Url({c:'teachaffair.organ',a:'get_all' , q:{org_id:default_org_id}}))
                    .then(res => {
                        this.organs = res.data.data
                    })
            },
            doSwitchOrgan (org_id) {
                this.where.school_id = ''
                this.doLoadSchools(org_id)
            },
            doLoadSchools (org_id) {
                axios.get(Url({c:'supervision.school',a:'get_all' , q:{org_id:org_id}}))
                    .then(res => {
                        this.schools = res.data.data
                    })
            },
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1
                axios.get(Url({a:'get_list' , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                        this.loading = false
                    })
            },
            doAbolish (id) {
                this.$confirm('确认作废该条订单吗?').then(_ => {
                    axios.get(Url({c:'financial.consume',a:'abolish' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '操作失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            }
        },
        mounted(){
            this.doLoadRows()

            this.doLoadOrgans()
            if ( default_org_id > 0 || this.where.org_id > 0 ) {
                org_id = default_org_id || this.where.org_id
                this.doLoadSchools(org_id)
            }
        }
    })
</script>
{/block}